<style type="text/css">
    .bg {
        background: #fff;
        padding-top: 48px;
        padding-bottom: 66px;
    }
    .p_d_img img{
        width: 100%;
    }
    .product_detail_footer{
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 0;
        z-index: 99999999999;
        background: #fff;
        border-top: 1px solid #f0f0f0;
    }
    .p_d_pic{
        width: 64px;
        height: 64px;
        border-radius: 6px;
        margin-top: -12px;
    }
    .p_d_top{
        padding: 0 12px;
    }
    .p_d_name{
        margin:4px 0 4px 12px;
        font-size: 15px;
    }
    .p_d_price{
        font-size: 14px;
        color: red;
        margin-left: 12px;
    }
    .confirm_btn{
        display: block;
        text-align: center;
        width: 100%;
        height: 48px;
        line-height: 48px;
        background: #f60;
        color: #fff;
        margin-top: 14px;
        font-size: 16px;
    }
    .control_panel{
        padding:  20px 14px 8px 20px;
        color: #666;
        font-size: 12.6px;
        display: none;
    }
    .control_item{
        height: 30px;
        line-height: 30px;
    }
    .control_item p{
        width: 40%;
        text-align: center;
    }
    .count_panel{
        height: 28px;
        line-height: 28px;
        line-height: 28px;
    }
    .count_btn{
        width: 40px;
        background: #eeeeee;
        font-size: 14px;
    }
    .now_count{
        width: calc(100% - 80px);
        text-align: center;
        border:1px solid #a1a1a1;
    }
    .trans_msg_title{
        text-align: center;
        font-size: 12.8px;
        line-height: 40px;
        color: #999;
    }
    .trans_msg_con{
        font-size: 13px;
        color: #f60;
    }
    .order_info{
        background: #fff;
        padding: 12px 18px;
        border-top: 1px solid #eeeeee;
        border-bottom: 1px solid #eeeeee;
        font-size: 12.8px;
        color: #999;
    }
    .checkPay{
        width: 20px;
    }
    .boxflex1 {
        padding: 10px 15px;
        /* background: #fff; */
        font-size: 17px;
    }
</style>


<div class="pro_header">
    <a href="javascript:history.go(-1)" class="return_btn"></a>
    <?= $this->title ?>
</div>


<div class="order_info" data-price="<?= $goods->amount ?>" data-score="<?= $goods->score ?>" data-num="<?= $num ?>">
    <p>单价： <?= $goods->amount ?>  数量：<?= $num ?></p>
    <p data-total-price="<?= $goods->amount * $num ?>">合计： <?= $goods->amount * $num ?></p>
    <p>赠送积分：<?= $goods->score * $num ?></p>
</div>


<div class="boxflex1">
    <div class="moneyhead">支付方式</div>
</div>
<div class="payType">
    <!--<div class="boxflex1 paystyle checkImg2" style="border-top:0;"  data-type="1">
        <img src="/images/pay.png" style="width: 20px;">
        <span>网银支付</span>
        <img src="/images/seleted.png" alt="" style="float:right;" class="check-paytwo checkPay" >
    </div>-->
    <!--<div class="boxflex1 paystyle checkImg3" style="border-top:0;" data-type="2">
        <img src="/images/icon-chat.png" style="width: 20px;">
        <span>微信扫码</span>
        <img src="/images/seleted.png" alt="" style="float:right;" class="check-paythree checkPay" >
    </div>-->
    <!--<div class="boxflex1 paystyle checkImg3" style="border-top:0;" data-type="3">
        <img src="/images/qq.png" style="width: 20px;">
        <span>QQ扫码</span>
        <img src="/images/notseleted.png" alt="" style="float:right;" class="check-paythree checkPay" >
    </div>
    <div class="boxflex1 paystyle checkImg3" style="border-top:0;" data-type="4">
        <img src="/images/qq.png" style="width: 20px;">
        <span>QQ H5</span>
        <img src="/images/notseleted.png" alt="" style="float:right;" class="check-paythree checkPay" >
    </div>-->
    <!--<div class="boxflex1 paystyle checkImg3" style="border-top:0;" data-type="5">
        <img src="/images/alipay.png" style="width: 20px;">
        <span>支付宝扫码</span>
        <img src="/images/notseleted.png" alt="" style="float:right;" class="check-paythree checkPay" >
    </div>
    <div class="boxflex1 paystyle checkImg3" style="border-top:0;" data-type="6">
        <img src="/images/pay.png" style="width: 20px;">
        <span>银联扫码</span>
        <img src="/images/notseleted.png" alt="" style="float:right;" class="check-paythree checkPay" >
    </div>-->
    <div class="boxflex1 paystyle checkImg3" style="border-top:0;" data-type="7">
        <img src="/images/pay.png" style="width: 20px;">
        <span>银联快捷</span>
        <img src="/images/seleted.png" alt="" style="float:right;" class="check-paythree checkPay" >
    </div>
    <div class="boxflex1 paystyle checkImg3" style="border-top:0;" data-type="8">
        <img src="/images/qq.png" style="width: 20px;">
        <span>QQ扫码</span>
        <img src="/images/notseleted.png" alt="" style="float:right;" class="check-paythree checkPay" >
    </div>
    <div class="boxflex1 paystyle checkImg3" style="border-top:0;" data-type="9">
        <img src="/images/alipay.png" style="width: 20px;">
        <span>支付宝</span>
        <img src="/images/notseleted.png" alt="" style="float:right;" class="check-paythree checkPay" >
    </div>
    <div class="boxflex1 paystyle checkImg3" style="border-top:0;" data-type="10">
        <img src="/images/qq.png" style="width: 20px;">
        <span>QQ H5</span>
        <img src="/images/notseleted.png" alt="" style="float:right;" class="check-paythree checkPay" >
    </div>
</div>

<?php $form = self::beginForm(['showLabel' => false, 'action' => url(['site/goodsPay']), 'id' => 'payform']) ?>
    <input type="hidden" id="goodsId" name="goods_id" value="<?= $goods->goods_id ?>">
    <input type="hidden" id="num" name="num" value="<?= $num ?>">
    <input type="hidden" id="type" name="type" value="7">
<?php self::endForm() ?>

<div class="product_detail_footer">
    <a class="confirm_btn">立即支付</a>
</div>


<script type="text/javascript">
    $(function(){
        $('.payType .paystyle').on('click', function(){
            var type = $(this).data('type');
            $('.payType .paystyle').each(function(){
                if (type == $(this).data('type')) {
                    $(this).find('.checkPay').attr({"src":"/images/seleted.png"});
                } else {
                    $(this).find('.checkPay').attr({"src":"/images/notseleted.png"});
                }
            });
            $('#type').val(type);
        });

        $('.confirm_btn').on('click', function(){
            $("#payform").submit();
        });
    });
</script>





